<template>
  <title-container
    v-if="question"
    :id="question.outId"
    :index="index"
    :total="total"
    :error="error"
    :question="question"
  >
    <div v-for="(item, index) in question.questionContent" :key="index" class="item">
      <a-radio :checked="item.checked" @change="onChange(item, index)">
        {{ item.content }}
      </a-radio>
      <a-textarea
        v-if="item.isBlank && item.checked"
        v-model="item.value"
        class="item_input"
        placeholder="填写内容..."
        :auto-size="{ minRows: 3, maxRows: 5 }"
        @blur="onBlur(item, index)"
      />
    </div>
  </title-container>
</template>

<script>
import TitleContainer from '@/components/titleContainer'
export default {
  name: 'Radio',
  components: {
    TitleContainer
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    },
    question: {
      type: Object,
      default: null
    },
    error: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  created() {
    // console.log('single ')
    this.question.questionContent.forEach((item, index) => {
      item.checked = !!item.checked
    })
    this.question.requiredFlag = this.question.requiredFlag === undefined ? true : this.question.requiredFlag
    this.question.questionTag = this.question.questionTag || []
    const tag = '单选题'

    this.question.questionTag.unshift(tag)
  },
  methods: {
    onChange(item, index) {
      // console.log('onChange', item, index)
      item.checked = true
      this.forceUpdate(item, index)

      // 处理选项互斥的交互
      this.excludeList(item, index)
      this.submit()
    },

    // 若当前选中选项，将其他互斥选项设置为“未选中”状态
    excludeList(item, index) {
      this.question.questionContent.forEach((child, i) => {
        if (index !== i && item.checked) {
          child.checked = false
          this.forceUpdate(child, i)
        }
      })
    },

    onBlur(item, index) {
      // console.log('blur', item, index)
      this.submit()
    },
    submit() {
      // console.log('submit')
      const index = this.index
      // 拼接选中的选项
      const result = []
      this.question.questionContent.forEach((item, idx) => {
        if (!item.checked) return false
        if (item.require && !item.value) return false
        result.push({ index: idx, content: item.content, value: item.value })
      })

      // 要求为必填时，必须选择一项
      if (this.question.requiredFlag && result.length === 0) {
        return false
      }
      const answer = {
        surveyId: this.question.surveyId,
        outId: this.question.outId,
        questionType: this.question.questionType,
        result: result
      }
      // console.log('暴露给父组件', answer, index)
      this.$emit('complete', answer, index)
    },
    forceUpdate(item, index) {
      this.$set(this.question.questionContent, index, item)
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.item{
  margin-bottom: 14px;
}
.item_input {
  margin-top: 14px;
}
</style>
